<template>
  <span>
    <a-icon v-if="helpCode" type="question-circle" @click="showHelp" :title="$t('m.components.label.dian-ji-cha-kan-shi-yong-bang-zhu')"/>

    <ych-modal
      :fullscreen="false"
      :title="title"
      :visible="visible"
      @cancel="handleCancel">

      <a-collapse v-if="dataSource.length > 0" v-model="activeKey">
        <a-collapse-panel v-for="item in dataSource" :key="item.id">
          <p v-if="!!item.helpDesc">{{ item.helpDesc }}</p>
          <ych-code-editor
            v-model="item.scriptContent"
            language="javascript"
            :disabled="true"
            style="min-height: 100px"/>
          <div slot="header">
            <div style="float: right; padding-left: 10px">
              <a-icon v-if="!!item.scriptContent && item.isSystem !== 'Y'" type="cloud-upload" @click="uploadHelps(item, $event);" :title="$t('m.common.button.uploadHelps')"/>
              <a-icon v-if="!!item.scriptContent" type="copy" @click="copyHelps(item.scriptContent, $event);" style="padding-left: 5px;" :title="$t('m.common.button.copy')"/>
              <a-icon v-if="item.isDelete === 'Y'" type="delete" @click="deleteHelps(item.id, $event);" style="padding-left: 5px;" :title="$t('m.common.button.delete')"/>
              <a-icon v-if="item.isDelete === 'Y'" type="edit" @click="editHelps(item, $event);" style="padding-left: 5px;" :title="$t('m.common.button.update')"/>
            </div>
            {{ item.helpName }}
          </div>
        </a-collapse-panel>
      </a-collapse>
      <p v-else>
        {{ $t('m.components.label.zan-wu-bang-zhu-xin-xi') }}
      </p>

      <template slot="footer">
        <a-button type="primary" key="sync" @click="syncHelps">{{ $t('m.common.button.sync') }}</a-button>
        <a-button key="back" @click="handleCancel">{{ $t('m.common.button.close') }}</a-button>
      </template>
    </ych-modal>

    <ych-help-util ref="help" @ok="showHelp"></ych-help-util>
  </span>
</template>

<script>

import {getAction, deleteAction, postAction} from '@/api/manage'
import YchConstant from "@/api/YchConstant";
import {YchCodeEditor} from '@yuncheng/ych-components'
import YchHelpUtil from './ych-helps/YchHelpUtil'
import {copy} from '../../utils/util'

export default {
  name: 'YchHelp',
  props: {
    helpCode: String
  },
  components: {
    YchCodeEditor,
    YchHelpUtil,
  },
  data() {
    return {
      visible: false,
      title: this.$t('m.components.label.shi-yong-bang-zhu'),
      dataSource: [],
      activeKey: [],
      url: {
        list_url: YchConstant.PREFIX_EFORM + '/manage/actAppHelp/list',
        delete_url: YchConstant.PREFIX_EFORM + '/manage/actAppHelp/delete',
        sync_url: YchConstant.PREFIX_EFORM + '/manage/actAppHelp/sync',
        uploadHelps_url: YchConstant.PREFIX_EFORM + '/manage/actAppHelp/upload',
      }
    }
  },
  methods: {
    async showHelp() {
      if (!this.helpCode) {
        return
      }
      this.activeKey = []
      const res = await getAction(this.url.list_url, {helpCode: this.helpCode})
      if (res.success) {
        this.dataSource = res.result || []
      } else {
        this.dataSource = []
      }
      this.visible = true
    },
    handleCancel() {
      this.visible = false
    },
    async deleteHelps(id, event) {
      event.stopPropagation();
      const that = this
      this.$confirm({
        title: this.$t('m.common.title.delete'),
        content: this.$t('m.common.tip.delete_confirm'),
        onOk: async function () {
          const res = await deleteAction(that.url.delete_url, {id: id})
          if (res.success) {
            that.$message.success(res.message)
            that.dataSource = that.dataSource.filter(item => item.id !== id)
            that.activeKey = that.activeKey.filter(item => item !== id)
          } else {
            that.$message.warning(res.message)
          }
        }
      })
    },
    editHelps(item, event) {
      event.stopPropagation();
      this.$refs.help.edit(item);
    },
    copyHelps(scriptContent, event) {
      event.stopPropagation();
      const that = this
      copy(scriptContent, () => {
        that.$message.success(that.$t('m.common.tip.copy_success'))
      })
    },
    uploadHelps(item, event) {
      event.stopPropagation();
      const that = this
      this.$confirm({
        title: this.$t('m.common.button.uploadHelps'),
        content: this.$t('m.common.tip.uploadHelps_confirm'),
        onOk: async function () {
          const res = await postAction(that.url.uploadHelps_url, item)
          if (res.success) {
            that.$message.success(that.$t('m.common.tip.uploadHelps_success'))
          } else {
            that.$message.warning(res.message)
          }
        }
      })
    },
    async syncHelps() {
      const that = this
      this.$confirm({
        title: this.$t('m.common.tip.sync'),
        content: this.$t('m.common.tip.sync_confirm'),
        onOk: async function () {
          const res = await postAction(that.url.sync_url)
          if (res.success) {
            that.$message.success(res.message)
            await that.showHelp()
          } else {
            that.$message.warning(res.message)
          }
        }
      })
    },
  }
}

</script>
